<template>
  <div class="body">
    <el-dialog
      title="添加评论"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" v-on:click="addComment()">确 定</el-button>
  </span>
    </el-dialog>
    <div class="display">
      <GeminiScrollbar class="my-scroll-bar">
      <div class="main">
        <div class="Avatar"><el-avatar  :size="100" :src="userInfo.avatar"></el-avatar></div>
        <div><label class="name">{{userInfo.username}}</label></div>
        <div class="sex"><label class="nameId">&nbsp {{userInfo.gender == 1 ? '男' : '女'}} &nbsp</label>
          <label class="nameId">&nbsp {{userInfo.uid}} &nbsp</label>
        </div>
        <div>
            <label style="font-family: 'Kaiti SC'; font-size: 20px; font-weight: bold">{{userInfo.content}}</label>
        </div>
        <div class="contact">
          <div>
            <el-button type="primary" icon="el-icon-chat-dot-square" @click="toMessageCard">消息</el-button>
          </div>
        </div>
        <!-- 弹幕评论 -->
        <div class="Barrage">
          <el-button  class="Barrage_button" type="primary" icon="el-icon-edit" @click="centerDialogVisible = true">添加评论</el-button>
          <template style="margin: 0 auto">
            <el-carousel :interval="4000" type="card" height="250px" id="carousel_container">
              <el-carousel-item v-for="item in comments"  id="carousel" >
<!--                名字  头像  评论  时间-->
                <el-avatar :size="50" :src="getFriendAvatar(item.commentatorid).avatar"></el-avatar><br>
                <span style="font-family: 'Kaiti SC'; font-size: 20px; font-weight: bolder">{{getFriendAvatar(item.commentatorid).username}}</span>
                <h3 class="medium" >{{item.content}}</h3>
                <span>{{item.createtime.split("T")[0]}}</span>
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
        <div class="deletebutton">
        <el-popover
          placement="top"
          width="160"
          v-model="visible">
          <p>确定删除好友吗？</p>
          <div style="text-align: right; margin-top: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button type="danger" size="mini" @click="deletefriend()">确定</el-button>
          </div>
          <el-button slot="reference" type="danger">删除好友</el-button>
        </el-popover>
          </div>
      </div>
      </GeminiScrollbar>
    </div>

  </div>
</template>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    export default {
  name: 'UserCard',
  props:['userInfo'],
  data () {
    return {
        input:"",
        centerDialogVisible: false,
      visible: false,
      friendList: [],
      comments: [

      ]
    }
  },
        created() {
            var that = this
            this.friendList = JSON.parse(window.localStorage.getItem("friendList"));
            this.$http(this.$api.getMyComment, {uid: this.userInfo.uid}).then(res=>{
                that.comments = res.data
                console.log("comment")
                console.log(this.comments)
            });
            this.$http(this.$api.getFriendList, {uid: this.userInfo.uid}).then(res=>{
                that.friendList = res.data
                console.log("comment")
                console.log(this.comments)
            })
        },
  methods:{
    toMessageCard(){
        console.log(this.userInfo)
        console.log(this.comments)
      this.$emit('toMessageCard', this.userInfo)
    },
      getFriendAvatar(tagid){
        console.log("!!!!!!!!!");
          for(var i = 0; i < this.friendList.length; i++){
              if(this.friendList[i].uid === tagid) {
                  return this.friendList[i];
              }
          }
          return window.localStorage.userInfo.uid;
      },
      deletefriend(){
        var that = this
        that.$http(this.$api.deleteFriend, {uid: window.localStorage.uid, friendid: this.userInfo.uid}).then(res=>{
            that.$emit("refresh")

        })
      },
      addComment(){
        var that = this
          that.centerDialogVisible = false
          console.log("执行了啊")
        that.$http(this.$api.addComment, {commentatorid: window.localStorage.uid, uid: this.userInfo.uid, content: this.input}).then(res=>{
            that.$emit("refreshcomment")
        })
      }
  }

}
</script>

<style scoped>
  .body{
    /*background-color: #ff0000;*/
    background-image: url("../../images/3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    color: #333;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;

  }
  .display{
    /*background-color: rgba(2, 0, 0, 0.1);*/
    margin: 0 auto;
    width: 85%;
    height: 85%;
    position: relative;
    top: 7.5%;
    /*opacity: 0.1;*/
  }
  .name{
    color: black;
    font-family: "Kaiti SC";
    font-weight: bolder;
    font-size: 22px;
  }
  .my-scroll-bar{
    height: 100%;
  }
  .Avatar{
    height: 100px;
    padding-top: 40px;
    padding-bottom: 15px;
  }
  .el-avater{
    position: relative;
    margin-top:40px;
  }
  .sex{
    margin: 15px auto;
    height: 22px;
    width: 100px;
    /*background-color: rgba(80, 80, 80, 0.5);*/
    text-align: center;
    border-radius: 3px;
    color: white;
  }
  .nameId{
    background-color: rgba(0, 0, 0, 0.4);
    font-family: 微软雅黑;
    font-size: 10px;
    border-radius: 3px;
  }
  .contact{
    margin: 20px auto;
  }
  .el-button--primary{
    color: white;
    font-size: 15px;
    padding: 8px 14px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 0;
  }
  .Barrage{
    width: 85%;
    margin: 100px auto 0;
  }
  .Barrage_button{
    margin-bottom: 20px;
  }
  .el-carousel__item h3 {
    color: black;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  #carousel{
    margin: 0 auto!important;
    padding: 15px;
    background-color: #ebe7c2;
    opacity: 0.9;
    text-align: center;
  }
  .medium{
    line-height: 100px!important;
    font-size: 25px!important;
  }
  .el-carousel__item:nth-child(2n) {
    width: 45%;
    background-color: white;
    opacity: 0.9;
    border-radius: 10px;
  }

  .el-carousel__item:nth-child(2n+1) {
    width: 45%;
    background-color: white;
    opacity: 0.9;
    border-radius: 10px;
  }
  .deletebutton{
    margin-top: 200px;
  }

</style>
